<template>
  <div>
    <HeaderIndex title="资讯正文" />
    <div class="out">
      <p class="top">猫眼电影>资讯正文</p>
      <h1>{{ detailObj.title }}</h1>
      <div class="userInfo">
        <img src="@/assets/logo.png" alt="" />
        <div>
          <p>{{ detailObj.source }}</p>
          <p style="color:#999">09-03 14:24 {{ detailObj.viewCount }}次阅读</p>
        </div>
      </div>
      <main v-for="v in detailObj.images" :key="v.id">
        <img :src="v.url" alt="" />
        <div>
          今年才过去八个月份，所以年度最佳电影还难定论。 但今年年度最暖心电影，很有可能已经面世。因为你很难找到比《 今年才过去八个月份，所以年度最佳电影还难定论。 的身份：失聪父母的孩子（Child of Deaf
          Adults）。
          这个片名的双面性，刚好指代着露比人生中的两个面向：一方面，作为失聪家庭中唯一的健全成员，露比充当着照顾、保护自己的失聪父母和哥哥，为他们进行手语翻译，在「正常人」和他们中间搭建桥梁的角色。
        </div>
      </main>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    detailObj() {
      return this.$store.state.infomation.infoArr.find(Element => Element.contentId == this.$route.query.id);
    },
  },
};
</script>

<style lang="less" scoped>
.out {
  padding: 0.2rem;
  box-sizing: border-box;
  width: 100%;
  .top {
    color: #999;
    font-size: 0.25rem;
    margin: 0.1rem 0;
  }
  h1 {
    font-weight: 900;
    font-size: 0.5rem;
  }
  .userInfo {
    margin: 0.2rem 0;
    img {
      width: 0.8rem;
      height: 0.8rem;
      border-radius: 50%;
      float: left;
    }
    div {
      float: left;
      margin-left: 0.2rem;
    }
  }
  main {
    div {
      text-indent: 1em;
      font-size: 0.35rem;
      margin: 0.1rem 0;
    }
    img {
      width: 100%;
      height: 5rem;
    }
  }
}
</style>
